<script setup>
import { DemoOne } from '@/stores/index'
const visible = DemoOne()
</script>

<template>
  <transition name="foot">
    <div v-if="visible.vuepage" id="gardenfoot">
      <div class="gardenfoot_top">
        <router-link to="/">安保出勤</router-link>
        <router-link to="/foot2">保洁出勤</router-link>
        <router-link to="/foot3">管理出勤</router-link>
        <router-link to="/foot4">物业出勤</router-link>
      </div>
      <div class="gardenfoot_bottom">
        <router-view></router-view>
      </div>
    </div>
  </transition>
</template>

<style lang="scss" scoped>
#gardenfoot {
  position: absolute;
  left: vw(510px);
  bottom: vh(18px);
  width: vw(900px);
  height: vh(254px);
  background-color: rgba(3, 19, 60, 0.5);
  z-index: 1;

  .gardenfoot_top {
    width: 100%;
    height: vh(42px);
    font-size: vw(16px);
    background: url('../../assets/img/foottextbox.png') no-repeat center/100% 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: vw(27px);

    a {
      display: inline-block;
      width: vw(120px);
      height: vh(32px);
      line-height: vh(32px);
      text-align: center;
    }

    .router-link-active {
      background-color: #103d69;
      border: solid 1px #58b6ff;
    }
  }

  .gardenfoot_bottom {
    width: 100%;
    height: vh(212px);
  }
}

/* 淡入淡出加滑动效果 */
.foot-enter-active,
.foot-leave-active {
  transition: opacity 0.5s, transform 0.5s;
}

.foot-enter-from {
  opacity: 0;
  transform: translateY(100px);
}

.foot-leave-to {
  opacity: 0;
  transform: translateY(100px);
}
</style>